<template>
  <transition name="fade">
    <div v-if="visible" :class="['message-box', type]">
      <span class="msg-icon">
        <template v-if="type === 'success'">
          <svg viewBox="0 0 24 24" width="28" height="28" fill="#fff"><circle cx="12" cy="12" r="12" fill="#3bb368"/><path d="M7 13.5l3 3 7-7" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
        </template>
        <template v-else>
          <svg viewBox="0 0 24 24" width="28" height="28" fill="#fff"><circle cx="12" cy="12" r="12" fill="#e14c4c"/><path d="M8 8l8 8M16 8l-8 8" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/></svg>
        </template>
      </span>
      <span class="msg-text">{{ text }}</span>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'

const visible = ref(false)
const text = ref('')
const type = ref<'success' | 'error'>('success')
let timer: any = null

function show(msg: string, msgType: 'success' | 'error' = 'success', duration = 2000) {
  text.value = msg
  type.value = msgType
  visible.value = true
  clearTimeout(timer)
  timer = setTimeout(() => {
    visible.value = false
  }, duration)
}

defineExpose({ show })
</script>

<style scoped>
.message-box {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 90vw;
  padding: 18px 38px 18px 28px;
  border-radius: 14px;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  z-index: 3000;
  box-shadow: 0 8px 32px rgba(30,94,146,0.18), 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 16px;
  letter-spacing: 1px;
  opacity: 0.98;
  border: 2.5px solid #fff;
}
.message-box.success {
  background: linear-gradient(90deg, #3bb368 80%, #2fa85a 100%);
}
.message-box.error {
  background: linear-gradient(90deg, #e14c4c 80%, #c92b2b 100%);
}
.msg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-text {
  flex: 1;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>
